<template>
<view>
<view class="header">

  <view class="headerBtn">
     <view class="btnItem" :class="[item.isAct ? 'active' : '']" v-for="(item,index) in costType" @click="costTap(index)">{{item.name}}</view>
  </view>

  <!-- 保存按钮 -->
  <view class="saveBtn" @click="addMsgData()">保存</view>
</view>
<!-- 白色内容区 -->
<view class="content">
<!-- 金额 -->
<view class="moneyBox">
		<input type="digit" placeholder="0.00" :class="[costType[0].isAct ? 'pay' : 'income']" :placeholder-class="costType[0].isAct ? 'pay' : 'income'" @blur="getInfo" :value="info.money" data-type="money"/>
</view>
 <!-- 支出轮播图 -->
<swiper class="iconSwiper" :indicator-dots="true" :autoplay="false" :interval="3000" :duration="1000" v-if="costType[0].isAct">
	<swiper-item v-for="(item,index) in costIcon.pay">
	 <view class="iconBox">
		<view class="iconItem" :class="[icon.isAct ? 'active' : '']" v-for="(icon,id) in item" @click="costIconTap('pay',index,id)" v-if="updata">
			<image :src="icon.imgUrl"></image>
			<view class="iconName">{{icon.title}}</view>
		</view>
		</view>
	</swiper-item>
</swiper>
<!-- 收入轮播图 -->
<swiper class="iconSwiper" :indicator-dots="true" :autoplay="false" :interval="3000" :duration="1000" v-else>
	<swiper-item  v-for="(item,index) in costIcon.income">
		<view class="iconBox">
			<view class="iconItem" :class="[icon.isAct ? 'active' : '']" v-for="(icon,id) in item" @click="costIconTap('income',index,id)" v-if="updata">
				<image :src="icon.imgUrl"></image>
				<view class="iconName">{{icon.title}}</view>
			</view>
		</view>
	</swiper-item>
</swiper>

<!-- 日期 备注 -->
<picker mode="date" @change="getInfo" :value="info.date" data-type="date" >
  <view class="info">
  <text class="iconfont icon-riqi3"></text>
  <!-- <text>{{info.date}}</text> -->
  <text>{{info.date}}</text>
</view>
</picker>

<view class="info">
  <text class="iconfont icon-beizhu1"></text>
  <input type="text" placeholder="备注" placeholder-style="color: #999" @blur="getInfo" :value="info.comment" data-type="comment"/>
</view>

</view>
</view>
</template>

<script>
	export default {
		data() {
			return {
				costType: [
				      {
				        name: "支出",   
				        type: "pay",
				        isAct: true  // 是否是激活状态
				      },
				      {
				        name: "收入",   
				        type: "income",
				        isAct: false  // 是否是激活状态
				      }
				    ],
				  // 支出收入图标
				costIcon: {
				      // 支出图标
				    pay: [],
				        // 收入图标
				    income: []
				},
				    // 当前激活的图标数据
				actIcon: {
				    type: "",
				    index: "",
				    id: ""
				    },
				    // 金额，日期，备注
				info: {
				    money: "",
				    date: "",
				    comment: ""
				    },
				updata:true,
				imageData: [
					{
					    "imgUrl": "../../static/icon/zjf.png",
					    "title": "座机费",
					    "type": "pay"
					},
					{
					    "imgUrl": "../../static/icon/zjsr.png",
					    "title": "中奖收入",
					    "type": "income"
					},
					{
					    "imgUrl": "../../static/icon/zlf.png",
					    "title": "治疗费",
					    "type": "pay"
					},
					{
					    "imgUrl": "../../static/icon/zwwc.png",
					    "title": "早午晚餐",
					    "type": "pay"
					},
					{
					    "imgUrl": "../../static/icon/ydjs.png",
					    "title": "运动健身",
					    "type": "pay"
					},
					{
					    "imgUrl": "../../static/icon/yhsx.png",
					    "title": "银行手续",
					    "type": "pay"
					},
					{
					    "imgUrl": "../../static/icon/ywlq.png",
					    "title": "意外来钱",
					    "type": "income"
					},
					{
					    "imgUrl": "../../static/icon/ywds.png",
					    "title": "意外丢失",
					    "type": "pay"
					},
					{
					    "imgUrl": "../../static/icon/yf.png",
					    "title": "衣服",
					    "type": "pay"
					},
					{
					    "imgUrl": "../../static/icon/ypf.png",
					    "title": "药品费",
					    "type": "pay"
					},
					{
					    "imgUrl": "../../static/icon/xxyl.png",
					    "title": "休闲娱乐",
					    "type": "pay"
					},
					{
					    "imgUrl": "../../static/icon/xykhk.png",
					    "title": "信用卡还款",
					    "type": "income"
					},
					{
					    "imgUrl": "../../static/icon/xmbb.png",
					    "title": "鞋帽包包",
					    "type": "pay"
					},
					{
					    "imgUrl": "../../static/icon/xjfm.png",
					    "title": "孝敬父母",
					    "type": "pay"
					},
					{
					    "imgUrl": "../../static/icon/wygl.png",
					    "title": "物业管理",
					    "type": "pay"
					},
					{
					    "imgUrl": "../../static/icon/tzks.png",
					    "title": "投资亏损",
					    "type": "pay"
					},
					{
					    "imgUrl": "../../static/icon/slqk.png",
					    "title": "送礼请客",
					    "type": "pay"
					},
					{
					    "imgUrl": "../../static/icon/sjcfy.png",
					    "title": "私家车费用",
					    "type": "pay"
					},
					{
					    "imgUrl": "../../static/icon/sgls.png",
					    "title": "水果零食",
					    "type": "pay"
					},
					{
					    "imgUrl": "../../static/icon/syy.png",
					    "title": "水电煤气",
					    "type": "pay"
					},
					{
					    "imgUrl": "../../static/icon/syy.png",
					    "title": "烟酒茶",
					    "type": "pay"
					},
					{
					    "imgUrl": "../../static/icon/syy.png",
					    "title": "邮寄费",
					    "type": "pay"
					},
					{
					    "imgUrl": "../../static/icon/sjf.png",
					    "title": "手机费",
					    "type": "pay"
					},
					{
					    "imgUrl": "../../static/icon/swf.png",
					    "title": "上网费",
					    "type": "pay"
					},
					{
					    "imgUrl": "../../static/icon/rcyp.png",
					    "title": "日常用品",
					    "type": "pay"
					},
					{
					    "imgUrl": "../../static/icon/pcfk.png",
					    "title": "赔偿罚款",
					    "type": "pay"
					},
					{
					    "imgUrl": "../../static/icon/lxzc.png",
					    "title": "利息支出",
					    "type": "pay"
					},
					{
					    "imgUrl": "../../static/icon/ljsr.png",
					    "title": "礼金收入",
					    "type": "income"
					},
					{
					    "imgUrl": "../../static/icon/jysd.png",
					    "title": "经营所得",
					    "type": "income"
					},
					{
					    "imgUrl": "../../static/icon/jzsr.png",
					    "title": "兼职收入",
					    "type": "income"
					},
					{
					    "imgUrl": "../../static/icon/jbsr.png",
					    "title": "加班收入",
					    "type": "income"
					},
					{
					    "imgUrl": "../../static/icon/hzsp.png",
					    "title": "化妆饰品",
					    "type": "pay"
					},
					{
					    "imgUrl": "../../static/icon/ggjt.png",
					    "title": "公共交通",
					    "type": "pay"
					},
					{
					    "imgUrl": "../../static/icon/gzsr.png",
					    "title": "工资收入",
					    "type": "income"
					},
					{
					    "imgUrl": "../../static/icon/fbjh.png",
					    "title": "腐败聚会",
					    "type": "pay"
					},
					{
					    "imgUrl": "../../static/icon/fz.png",
					    "title": "房租",
					    "type": "pay"
					},
					{
					    "imgUrl": "../../static/icon/djly.png",
					    "title": "度假旅游",
					    "type": "pay"
					},
					{
					    "imgUrl": "../../static/icon/dczc.png",
					    "title": "打车租车",
					    "type": "pay"
					},
					{
					    "imgUrl": "../../static/icon/csjz.png",
					    "title": "慈善捐助",
					    "type": "pay"
					},
					{
					    "imgUrl": "../../static/icon/cwbb.png",
					    "title": "宠物宝贝",
					    "type": "pay"
					},
					{
					    "imgUrl": "../../static/icon/bjf.png",
					    "title": "保健费",
					    "type": "pay"
					}]
				}
		},
		onLoad:function() {
			this.getIconData();
			this.getToday();
		},
		methods: {
			costTap(e){
				
				    // console.log(e)
				
				    // 判断当前点击的数据是否是激活状态，如果是则不执行以下所有操作
				    if(this.costType[e].isAct){
				      // console.log("已经激活了")
				      return; // 终止执行以下代码
				    }
				
				    // 取消上一个的激活数据
				    for(var k = 0; k < this.costType.length; k++){
				      if(this.costType[k].isAct){
				        // 条件成立则说明该数据为激活状态，则要取消激活
				        this.costType[k].isAct = false;
				        break; // 终止循环
				      }
				    }
				
				    // 设置当前点击的数据为激活状态
				    this.costType[e].isAct = true;
			},
			getIconData:function(){
				
				var data = this.imageData;
				
				var banner ={
					pay:[],
					income:[]
				}
				
				data.forEach(v=>{
					
					v.isAct=false;
					
					banner[v.type].push(v);
					
				})
			
				for(var k in banner){
					var beginIndex = 0;
					
					while(beginIndex < banner[k].length){
						
						var newArr = banner[k].slice(beginIndex,beginIndex+8);
						
						
						this.costIcon[k].push(newArr)
						
						beginIndex += 8;
					}
					
				}
				
				
			},
			costIconTap(t,i,d){
				if(this.costIcon[t][i][d].isAct){
					this.costIcon[t][i][d].isAct = false;
					this.actIcon.type = "";
					this.actIcon.index = "";
					this.actIcon.id = "";
					
				}else{
					if(this.actIcon.type!=""){
						var actT=this.actIcon.type;
						var actI = this.actIcon.index;
						var actD = this.actIcon.id;
						this.costIcon[actT][actI][actD].isAct = false;	
					}
			   // 设置当前点击的图标为激活状态
			      // this.costIcon[t][i][d].isAct = true;
					this.$set(this.costIcon[t][i][d],'isAct',true)
			      // 记录当前激活的图标数据
			      this.actIcon.type = t;
			      this.actIcon.index = i;
			      this.actIcon.id = d;
		
				}
			
				this.updata=false;
				this.updata=true;
			},
			getToday(){
				
				var time = new Date();
				
				var y = time.getFullYear();
				
				var m = time.getMonth()+1;
				
				var d = time.getDate();
				
				this.info.date = y +"-" + this.addZero(m) + "-" + this.addZero(d)
				
				
			},
			//获取日期、金额、备注
			getInfo(e){
				//获取选择日期
				
				//获取修改数据的类型
				var type = e.currentTarget.dataset.type;
				
				if(type =="money" && e.detail.value !=""){
					
				e.detail.value = Number(e.detail.value).toFixed(3).slice(0, -1);   
				
				
				}
				//只修改指定类型的数据
				this.info[type]=e.detail.value;
				
				
			},
			//补零函数
			addZero(num){
				return num <10 ? "0" + num : num;
			},
			addMsgData(){
				
				var msgData={};
				//获取用户选择的收入支出标题数据
				for(var i =0;i<this.costType.length;i++){
					if(this.costType[i].isAct){
						msgData.costType = this.costType[i].type;
						msgData.costName = this.costType[i].name;
						
					}
					
				}
				//获取用户选择的图标数据
				if(this.actIcon.type == ""){
					uni.showToast({
						title:"请选择图标！！",
						icon:"none",
						mask:true
					})
					return;
				}else{
					//用户选择了图标，则可以保存数据
					var t= this.actIcon.type;
					var i= this.actIcon.index;
					var d= this.actIcon.id;
					
					msgData.imgUrl = this.costIcon[t][i][d].imgUrl;
					msgData.imgTitle = this.costIcon[t][i][d].title;
					
				}
				//获取用户的金额 日期 备注数据
				for(var k in this.info){
					
					msgData[k] = this.info[k]
					
				}
				if(msgData.money == ""){
					msgData.money=="0.00"
				}
				uni.showLoading({
					title:"正在保存",
					mask:true
				})
				uni.getStorage({
					key:'openid',
					success:function(res){
						msgData.openid = res.data;
						 uni.request({
						 	url:"http://175.178.80.92/index.php/index/record/index",
						 	data:{
						 		Type:msgData.costType,
						 		Name:msgData.costName,
						 		Money:msgData.money,
						 		Url:msgData.imgUrl,
						 		Comment:msgData.comment,
						 		Date:msgData.date,
						 		Title:msgData.imgTitle,
						 		Openid:msgData.openid
						 	},
						 	header:{
						 		'content-type':'application/x-www-form-urlencoded'
						 	},
						 	method:'POST',
						 	success:(res) => {
						 		uni.hideLoading();
						 		
						 		uni.navigateBack({})
						 		
						 	},
						 	fail: (res) => {
						 		uni.hideLoading();
						 		
						 	}
						 	
						 })
					},
					fail:function(res){
						console.log(res);
					}
				})
				
			}
			
		
		},
	}
</script>

<style>
.header{
  background-color: #28B298;
  padding: 20rpx 0;
  position: relative;
  font-size: 32rpx;
}
.header .headerBtn{
  width: 300rpx;
  height: 70rpx;
  border: 1px solid #fff;
  margin: 0 auto;
  display: flex;
  border-radius: 20rpx;
  overflow: hidden;
}
.header .headerBtn .btnItem{
  width: 50%;
  line-height: 70rpx;
  text-align: center;
  color: #fff;
}
.header .headerBtn .active{
  background: #fff;
  color: #28B298;
}
.header .saveBtn{
  position: absolute;
  right: 30rpx;
  top: 50%;
  color: #fff;
  height: 70rpx;
  line-height: 70rpx;
  margin-top: -35rpx;
}
/* 白色空白区 */
.content{
  background-color: #fff;
  /* height: 300px; */
}
.moneyBox{
  padding: 20rpx;
}
.moneyBox input{
  font-size: 80rpx;
  height: 80rpx;
}
/* 轮播图样式 */
.iconSwiper{
  height: 380rpx;
}
.iconBox{
  padding: 0 20rpx;
}
/* 单个图标样式 */
.iconItem{
  width: 25%;
  float: left;
  margin-top: 20rpx;
  /* background: #ff0; */
}
.iconItem image{
  width: 100rpx;
  height: 100rpx;
  display: block;
  margin: 0 auto;
}
.iconItem .iconName{
  font-size: 24rpx;
  color: #999;
  text-align: center;
  padding-bottom: 10rpx;
}

/* 激活的图标样式 */
.iconBox .active{
  box-shadow: 0rpx 0rpx 10rpx 5rpx #ccc;
}
.iconBox .active image{
  transform: scale(1.2);  /* 缩放属性 >1: 放大  <1:缩小*/
}
.iconBox .active .iconName{
  color: #000;
  font-weight: bold;
}

/* 日期备注样式 */
.info{
  display: flex;
  padding: 30rpx 20rpx 0;
  color: #999;
  font-size: 32rpx;
  height: 50rpx;
  line-height: 50rpx;
}
.info .iconfont{
  width: 50rpx;
  display: block;
}
.info input{
  /* calc() css的计算函数，可以进行加减乘除运算， 注意运算时加减乘除符号左右两侧需空格，否则运算无效*/
  width: calc(100% - 50rpx);
}
	.pay{
	  color: #28B298;
	}
	
	/* 收入类 */
	.income{
	  color: #E78993;
	}
</style>
